<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="../sass/header.css">
    <link rel="stylesheet" href="../sass/detail.css">
</head>

<body>
    <!-- 头部 -->
    <div id="detail-header"></div>
    <!-- 首页 -->
    <div id="detail-line">
        <div class="container">
            <a href="../pages/index.html">首页</a>
        </div>
    </div>
    <!-- 详情 -->
    <div id="detail-content" class="container">
        <!-- 轮播和商品介绍 -->
        <div class="detail-top-left">
            <!-- 轮播 -->
            <div class="detail-swiper">
                <div class="swiper-wrapper">
                    <div class="wrapper">1</div>
                    <div class="wrapper">2</div>
                    <div class="wrapper">3</div>
                    <div class="wrapper">4</div>
                </div>
                <!-- 原点 -->
                <div class="circle">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <!-- 介绍  价格 -->
            <div class="detail-reduce  right">
                <h1>
                    <div class="detail-icon">
                        <img src="../lib/img/tao.png" alt="" class="icon1">
                        <img src="../lib/img/包邮2.png" alt="" class="icon2">
                    </div>
                    美妆蛋不吃粉超软细腻化妆海绵气垫粉扑干湿两用彩妆蛋官方旗舰店

                </h1>
                <!-- 原价  现价 -->
                <div class="prev-price">
                    <p class="prev-oldPrice">
                        <i>原价￥10.1</i>
                    </p>
                    <div class="new-price">
                        <span class="new-price-span">券后价：</span>
                        <span class="new-price-span2">
                            <i style="font-size: 20px; font-style: normal;">￥</i>
                            7
                            <span style="font-size: 28px;">1</span>
                            <span class="juan">3元劵</span>
                            <span class="people-num  right">365人已买</span>
                        </span>
                    </div>
                </div>
                <!-- 优惠截止日期 -->
                <p class="youhui  right">
                    优惠有效期：2021-11-16
                </p>
                <button  type="button"  class="add-btn  right">加入购物车</button>
            </div>
        </div>
        <!-- 卖家信息 -->
        <div class="detail-top-right  right">
            <div  class="shop-info">
                <span  class="shop-line"></span>
                <span class="shop-text">卖家信息</span>
                <span  class="shop-line"></span>
            </div>
            <img src="../lib/img/旺旺.png" alt=""  class="shop-img">
            <p  class="shop-name">王一博和我的店</p>
            <div class="shop-pinglun">
              <ul  class="shop-wuliu">
                  <li>描述</li>
                  <li>服务</li>
                  <li>物流</li>
              </ul>
              <ul  class="shop-score">
                <li>4.8</li>
                <li>4.8</li>
                <li>4.8</li>
            </ul>
            </div>
        </div>
        <!-- 下边商品图片 -->
        <div class="detail-bottom">
         <div  class="detail-bottom-img">
             <img src="../lib/img/美妆蛋.jpg" alt="">
             <img src="../lib/img/美妆蛋.jpg" alt="">
         </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div id="detail-foot"></div>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/detail.js"></script>
</body>

</html>